<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            margin: 0 auto;
            position: relative;
        }

        .prev {
            left: 0px;
            top: 40%;
            position: absolute;
            font-size: 40px;
            color: white;
        }

        .next {
            right: 0px;
            top: 40%;
            position: absolute;
            font-size: 40px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="./imgs/1t.png" />
        <span class="prev">
            < </span>
                <span class="next">></span>
    </div>
    <script>
        let containerEle = document.querySelector(".container");
        let prevEle = document.querySelector(".prev");
        let nextEle = document.querySelector(".next");
        function movePic(num = 1) {
            let imgEle = containerEle.querySelector("img");
            imgEle.style.transition = "all .2s";
            imgEle.style.opacity = 0;
            imgEle.addEventListener("transitionend", function () {
                this.src = `./imgs/${num}t.png`;
                this.style.opacity = 1;
            })
        }

        let num = 1;
        autoPlay();
        function autoPlay() {
          let timer = setInterval(() => {
                num++
                num = num > 3 ? 1 : num
                movePic(num);

            }, 2000);
            containerEle.onmouseenter = function(){
                console.log('onmouseenter')
                clearInterval(timer);
            }
            containerEle.onmouseleave = function(){
                console.log("leave")
                autoPlay();
            }
        }

        // 下一张
        nextEle.onclick = function(){
            num++;
            num = num > 3 ? 1 : num
            movePic(num);
        }
        // 上一张
        prevEle.onclick = function(){
            num--
            num =  num<1?3:num;
            movePic(num);
           
        }



    </script>
</body>

</html>